<template>
	<div>
        <header/>
        <div class="banner" />
        <div class="notice flex mt10 mb10 ml5 mr5">
            <div class="fl"></div>
            <div class="flex1"></div>
        </div>
        <div class="flex nav">
            <div class="flex1"></div>
            <div class="flex1"></div>
            <div class="flex1"></div>
            <div class="flex1"></div>
        </div>
        <div class="quota">
            <div class="title clearfix ml10 mr10">
                <span class="fl"></span>
                <span class="fr"></span>
            </div>
            <div class="cubewrap flex">
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
            </div>
            <div class="cubewrap flex">
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
            </div>
        </div>
        <div class="quota mt10">
            <div class="title clearfix ml10 mr10">
                <span class="fl"></span>
                <span class="fr"></span>
            </div>
            <div class="cubewrap flex">
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
            </div>
            <div class="cubewrap flex">
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
                <div class="cube flex1"></div>
            </div>
        </div>
        <footer class="tc">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </footer>
	</div>
</template>
<script>
export default {
	name: 'Skeleton'
}
</script>
<style scoped>
.bg{
    background: rgb(194, 207, 214);
}
header{
    height: 40px;
}
.banner{
    height: 100px;
}
.notice{
    margin-left: 10px;
    margin-right: 10px;
}
.notice .fl{
    width: 50px;
    height: 50px;

}
.notice div:first-child{
    width: 50px;
    margin-right: 5px;
}
.nav{
    height: 70px;
    margin-left: 10px;
    margin-top: 20px;
}
.nav .flex1{
    margin-right: 10px;
}
.round{
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    height: 100px;

}
.quota span{
    height: 15px;
    width: 50px;
    margin-top: 20px;
}
.title{
    margin-top: 10px;
    margin-bottom: 10px;
}
.quota span:first-child{
    height: 25px;
    width: 112px;
}
.cubewrap{
    margin-left: 10px;
}
.cube{
    margin-right: 10px;
    margin-bottom: 10px;
    height: 70px;
}
footer{
    margin-top: 20px;
}
footer p {
    height: 15px;
    margin: 0 auto;
    margin-top: 7px;

}
footer p:first-child{
    width: 35%;
}
footer p:nth-child(2){
    width: 40%;
}
footer p:nth-child(3){
    width: 50%;
}

footer p:nth-child(4){
    width: 30%;
}
header,.banner,.notice .fl, .flex1,.round, .title span,p{
	background: #ddd;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%);
	background-size: 20rem 20rem;
	animation: skeleton-stripes 3s linear infinite;
}

@keyframes skeleton-stripes {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 20rem 0;
	}
}
</style>

